<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见宠物狗介绍</title>
    <link rel="stylesheet" href="./css/dog.css">
    <link rel="stylesheet" href="./css/dogs.css">
    <link rel="icon" href="./img/logo.png">
</head>

<body class="light">
    <header class="header">
        <h1 class="title">常见宠物狗介绍</h1>
    </header>
    <div class="demoss">

        <nav class="mulu">
            <a href="./首页.html">首页</a>
        </nav>

    </div>
    <div class="container">
        <main>
            <ul class='slider'>
                <li class='item' style="background-image: url('./img/阿拉斯加雪橇犬.jpg')">
                    <div class='content'>
                        <h2 class='title'>阿拉斯加雪橇犬</h2>
                        <p class='description'>
                            阿拉斯加雪橇犬也叫阿拉斯加犬、阿拉斯加马拉穆等，原产北美阿拉斯加，是最古老的极地雪橇犬之一。该犬结实、有力、肌肉发达而且胸很深；当它们站立时，头部竖直，眼神显得警惕、好奇，给人的感觉是充满活力而且非常傲娇
                        </p>
                        <p>Alaskan Malamute</p>
                    </div>
                </li>
                <li class='item' style="background-image: url('./img/哈士奇.jpg')">
                    <div class='content'>
                        <h2 class='title'>哈士奇</h2>
                        <p class='description'>
                            西伯利亚雪橇犬是犬科犬属哺乳动物，别名西伯利亚哈士奇、哈士奇、二哈，是世界上最古老的犬种之一。该犬精力充沛，喜欢运动，个性独立，固执，并不适合学习一些和人类的互动动作，但性格温顺、友善，极少发生攻击性行为
                        </p>
                        <p>Alaskan Malamute</p>
                    </div>
                </li>
                <li class='item' style="background-image: url('./img/柴犬.jpg')">
                    <div class='content'>
                        <h2 class='title'>柴犬</h2>
                        <p class='description'>
                            柴犬是日本犬中的小型犬,主要分布在日本长野、山阴、岐阜等地。。柴犬经过长期培育珍养，便形成忠实、服从、忍耐的天性，成为其独特的气质。柴犬是杂食动物，应为其选择营养均衡的高品质犬粮，并根据柴犬的成长发育，选择不同年龄阶段的犬粮。并加强饮食管理，增加合理的运动量，包括外出散步的时间、玩互动玩具的时间等
                        </p>
                        <p>Shiba Inu</p>
                    </div>
                </li>
                <li class='item' style="background-image: url('./img/金毛.jpeg')">
                    <div class='content'>
                        <h2 class='title'>金毛寻回犬</h2>
                        <p class='description'>
                            金毛寻回犬，原产于英国，又称黄金猎犬、金毛寻回猎犬、金毛犬、金毛。金毛寻回犬性格沉稳，充满信心，忠诚，是理想的伴侣犬。由于特殊的皮肤构造和毛发特性，该犬耐寒但无法忍受闷热多湿的环境，可在清晨比较凉爽时带它外出散步。很喜欢玩水。在户外饲养时，要将狗屋搬到阳光照不到的地方，并随时保持清洁。
                        </p>
                        <p>Golden retriever</p>
                    </div>
                </li>
                <li class='item' style="background-image: url('./img/萨摩耶.jpg')">
                    <div class='content'>
                        <h2 class='title'>萨摩耶犬</h2>
                        <p class='description'>
                            萨摩耶犬别称萨摩耶，原是西伯利亚的原住民萨摩耶族培育出的犬种。萨摩耶犬温和而友善，从不制造麻烦；它天生聪明，对主人绝对忠诚。同时，它身体强壮、奔跑速度快，适应性强，机警，充满活力，乐于服务，进攻性不强，这使得萨摩耶犬成为人类忠实的朋友与伴侣，并逐渐进入千家万户。萨摩耶犬不单单是宠物，它也是优秀的工作犬，它是极地探险的英雄，是危险之地营救的能手。
                        </p>
                        <p>Read More</p>
                    </div>
                </li>
                <li class='item' style="background-image: url('./img/威尔士柯基.jpeg')">
                    <div class='content'>
                        <h2 class='title'>威尔士柯基</h2>
                        <p class='description'>
                            威尔士柯基犬,也称为柯基。柯基犬以其出色的牧羊和看护能力而著称，同时也是备受欢迎的玩赏犬和伴侣犬。它们体魄强健，肌肉发达，奔跑速度快。它们聪明活泼，精神饱满，警觉机灵，性情稳重，喜欢与人撒娇。
                        </p>
                        <p>Pembroke Welsh Corgi</p>
                    </div>
                </li>
            </ul>
            <nav class='nav'>
                <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
                <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
            </nav>
        </main>
    </div>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <script>
        const slider = document.querySelector('.slider');

        function activate(e) {
            const items = document.querySelectorAll('.item');
            e.target.matches('.next') && slider.append(items[0]);
            e.target.matches('.prev') && slider.prepend(items[items.length - 1]);
        }

        document.addEventListener('click', activate, false);

    </script>
</body>

</html>